<template>
  <div class="app-container">
    <div class="main-container">
      <div class="page-header">
        <router-link class="back-link" to="/main/renshi/yuangongdangan/yuangongguanli/yuangongguanli">
          <i class="el-icon-arrow-left"></i>
          返回
        </router-link>
        <h2>员工合同信息</h2>
      </div>
    </div>
    <!-- 搜索区域 -->
    <div class="page-header">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="员工姓名">
          <el-input v-model="queryParams.employeeName" placeholder="请输入员工姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="queryParams.employeeIdNumber" placeholder="请输入身份证号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用人单位">
          <el-input v-model="queryParams.employerName" placeholder="请输入用人单位" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="operation-container">
      <el-button type="danger" :disabled="selectedIds.length === 0" @click="handleBatchDelete">批量删除</el-button>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="employeeName" label="员工姓名" width="120"></el-table-column>
      <el-table-column prop="employeeIdNumber" label="身份证号" width="180"></el-table-column>
      <el-table-column prop="employerName" label="用人单位" width="180"></el-table-column>
      <el-table-column prop="contractPeriodType" label="合同期限类型" width="120">
        <template slot-scope="scope">
          {{ getContractPeriodTypeText(scope.row.contractPeriodType) }}
        </template>
      </el-table-column>
      <el-table-column prop="fixedStartDate" label="开始日期" width="120"></el-table-column>
      <el-table-column prop="fixedEndDate" label="结束日期" width="120"></el-table-column>
      <el-table-column prop="timedSalary" label="工资" width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.current" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getPageAPI,
  getInfoApi,
  saveOrUpdateApi,
  batchSaveOrUpdateApi,
  removeApi,
  batchRemoveApi
} from '@/api/employee-contract'

export default {
  name: 'YghetongList',
  data() {
    return {
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        employeeName: '',
        employeeIdNumber: '',
        employerName: ''
      },
      // 表格数据
      tableData: [],
      // 总记录数
      total: 0,
      // 加载状态
      loading: false,
      // 选中的记录ID
      selectedIds: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.loading = true
      try {
        const response = await getPageAPI(this.queryParams)
        this.tableData = response.data.records
        this.total = response.data.total
      } catch (error) {
        console.error('获取列表数据失败：', error)
        this.$message.error('获取列表数据失败')
      }
      this.loading = false
    },
    // 处理查询
    handleSearch() {
      this.queryParams.current = 1
      this.getList()
    },
    // 重置查询
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        employeeName: '',
        employeeIdNumber: '',
        employerName: ''
      }
      this.getList()
    },
    // 处理新增
    handleAdd() {
      this.$router.push('/main/renshi/danganguanli/yghetong/yghetong');
    },
    // 处理查看
    handleView(row) {
      this.$router.push({
        path: '/main/renshi/danganguanli/yghetong/yghetong',
        query: {
          id: row.id,
          mode: 'view'
        }
      });
    },
    // 处理编辑
    handleEdit(row) {
      this.$router.push({
        path: '/main/renshi/danganguanli/yghetong/yghetong',
        query: {
          id: row.id,
          mode: 'edit'
        }
      });
    },
    // 处理删除
    handleDelete(row) {
      this.$confirm('确认删除该员工合同?', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await removeApi(row.id)
          this.$message.success('删除成功')
          this.getList()
        } catch (error) {
          console.error('删除失败：', error)
          this.$message.error('删除失败')
        }
      }).catch(() => { })
    },
    // 处理批量删除
    handleBatchDelete() {
      if (this.selectedIds.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      this.$confirm(`确认删除选中的${this.selectedIds.length}条记录?`, '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await batchRemoveApi(this.selectedIds)
          this.$message.success('批量删除成功')
          this.getList()
        } catch (error) {
          console.error('批量删除失败：', error)
          this.$message.error('批量删除失败')
        }
      }).catch(() => { })
    },
    // 处理表格选择变化
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id)
    },
    // 处理每页显示记录数变化
    handleSizeChange(val) {
      this.queryParams.size = val
      this.getList()
    },
    // 处理页码变化
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.getList()
    },
    // 获取合同期限类型文本
    getContractPeriodTypeText(type) {
      const typeMap = {
        1: '固定期限',
        2: '无固定期限',
        3: '以完成一定工作任务为期限'
      }
      return typeMap[type] || '未知'
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 10px;
  /* background-color: #f5f7fa; */
  min-height: calc(100vh - 20px);
}

.main-container {
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 0px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

}

.page-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  font-family: '宋体';
}

.back-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #409EFF;
  font-size: 14px;
  margin-right: 20px;
  transition: all 0.3s;
}

.back-link i {
  margin-right: 5px;
}

.back-link :hover {
  opacity: 0.8;
}

.demo-form-inline {
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

/* .filter-container {
  margin-bottom: 0px;
} */

.operation-container {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>